<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="true"/>

  <title>Style test</title>

  <link rel="stylesheet" href="../../examples.css">

  <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
  <script type="text/javascript" src="../../../dist/iink.min.js"></script>
</head>

<body>
<div>
  <nav>
    <label for="font-family">Font family</label>
    <select name="font-family" id="font-family">
      <option value="Open Sans">Open Sans</option>
      <option value="Noto Sans CJK tc">Noto CJK TC</option>
    </select>
    <select name="font-style" id="font-style">
      <option value="normal">Normal</option>
      <option value="italic">Italic</option>
      <option value="oblique">Oblique</option>
    </select>
    <label for="font-weight">Font weight</label>
    <input id="font-weight" type="number" step="100" min="100" max="900" value="400">
    <label for="font-size">Font size</label>
    <input id="font-size" type="number" step="1" min="1" max="100" value="10">
    <label for="line-height">Line height</label>
    <input id="line-height" type="number" step="0.1" min="0" max="100" value="1.2">
    <label for="color">Color</label>
    <input id="color" type="text" value="#000000">
    <label for="-myscript-pen-width">Pen width</label>
    <input id="-myscript-pen-width" type="number" step="1" min="1" max="100" value="1">
    <label for="-myscript-pen-brush">Pen brush</label>
    <select name="-myscript-pen-brush" id="-myscript-pen-brush">
      <option value="FeltPen">FeltPen</option>
      <option value="FountainPen">FountainPen</option>
      <option value="CalligraphicQuill">CalligraphicQuill</option>
      <option value="CalligraphicBrush">CalligraphicBrush</option>
      <option value="Qalam">Qalam</option>
      <option value="Polyline">!! Polyline !!</option>
    </select>
  </nav>
  <nav>
    <label for="-myscript-text-decoration-style">Text decoration</label>
    <select name="-myscript-text-decoration-style" id="-myscript-text-decoration-style">
      <option value="none">None</option>
      <option value="underlined">Underlined</option>
      <option value="double-underlined">Double-underlined</option>
      <option value="framed">Framed</option>
      <option value="circled">Circled</option>
      <option value="framed-outline">Framed-outline</option>
      <option value="framed-background">Framed-background</option>
      <option value="circled-outline">Circled-outline</option>
      <option value="circled-background">Circled-background</option>
    </select>
    <label for="-myscript-text-decoration-color">Decoration color</label>
    <input id="-myscript-text-decoration-color" type="text" value="#000000">
    <label for="-myscript-text-decoration-background-color">Decoration background color</label>
    <input id="-myscript-text-decoration-background-color" type="text" value="#000000">
    <label for="-myscript-text-decoration-pen-width">Decoration pen width</label>
    <input id="-myscript-text-decoration-pen-width" type="number" step="1" min="1" max="100" value="1">
  </nav>
  <nav>
    <button class="action-button" id="clear" disabled></button>
    <button class="action-button" id="undo" disabled></button>
    <button class="action-button" id="redo" disabled></button>
    <div class="spacer"></div>
    <button class="action-label-button" id="convert" disabled>Convert</button>
  </nav>
  <div id="editor" touch-action="none"></div>
</div>
<script>
  const editorElement = document.getElementById('editor');
  const undoElement = document.getElementById('undo');
  const redoElement = document.getElementById('redo');
  const clearElement = document.getElementById('clear');
  const convertElement = document.getElementById('convert');

  const fontStyle = document.getElementById('font-style');
  const fontFamily = document.getElementById('font-family');
  const fontWeight = document.getElementById('font-weight');
  const fontSize = document.getElementById('font-size');
  const lineHeight = document.getElementById('line-height');
  const penWidth = document.getElementById('-myscript-pen-width');
  const penBrush = document.getElementById('-myscript-pen-brush');
  const color = document.getElementById('color');
  const textDecoration = document.getElementById('-myscript-text-decoration-style');
  const textDecorationColor = document.getElementById('-myscript-text-decoration-color');
  const textDecorationBackgroundColor = document.getElementById('-myscript-text-decoration-background-color');
  const textDecorationPenWidth = document.getElementById('-myscript-text-decoration-pen-width');


  const theme = {
    ink: {
      'color': color.value,
      '-myscript-pen-width': penWidth.value,
    },
    '.text': {
      'font-family': fontFamily.value,
      'font-style': fontStyle.value,
      'font-weight': fontWeight.value,
      'font-size': fontSize.value,
      'line-height': lineHeight.value,
      'color': color.value,
      '-myscript-pen-width': penWidth.value,
      '-myscript-pen-brush': penBrush.value,
      '-myscript-text-decoration-style': textDecoration.value,
      '-myscript-text-decoration-color': textDecorationColor.value,
      '-myscript-text-decoration-background-color': textDecorationBackgroundColor.value,
      '-myscript-text-decoration-pen-width': textDecorationPenWidth.value
    }
  };

  const styleElements = [fontFamily, fontStyle, fontSize, fontWeight, lineHeight, penWidth,
    penBrush, color, textDecoration, textDecorationColor, textDecorationBackgroundColor, textDecorationPenWidth];

  styleElements.map(element => element.addEventListener('input', () => {
      if (element.id === 'color' || element.id === '-myscript-pen-width') {
        theme['ink'][element.id] = element.value;
        theme['.text'][element.id] = element.value;
        editor.theme = theme;
      } else {
        theme['.text'][element.id] = element.value;
        editor.theme = theme;
      }
    }
  ));

  editorElement.addEventListener('changed', (evt) => {
    clearElement.disabled = evt.detail.isEmpty;
    undoElement.disabled = !evt.detail.canUndo;
    redoElement.disabled = !evt.detail.canRedo;
    convertElement.disabled = !evt.detail.canConvert;
  });

  undoElement.addEventListener('click', () => {
    editorElement.editor.undo();
  });
  redoElement.addEventListener('click', () => {
    editorElement.editor.redo();
  });
  clearElement.addEventListener('click', () => {
    editorElement.editor.clear();
  });
  convertElement.addEventListener('click', () => {
    editorElement.editor.convert();
  });

  /**
   * Attach an editor to the document
   * @param {Element} The DOM element to attach the ink paper
   * @param {Object} The recognition parameters
   */
  const editor = iink.register(editorElement, {
    recognitionParams: {
      type: 'TEXT',
      protocol: 'WEBSOCKET',
      server: {
        scheme: 'https',
        host: 'webdemoapi.myscript.com',
        applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
        hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
      }
    }
  });

  window.addEventListener('resize', () => {
    editorElement.editor.resize();
  });
</script>
</body>

</html>
